<template>
	<view>
		<float-bar  :tabIsShowValue="100"
			:bagesCount="notifCount.toString()" ref="floatBar"
			@deleteData="deleteData"></float-bar>
		
		<uni-list v-if="notifCount > 0">
			<uni-swipe-action>
				<uni-swipe-action-item  v-for="item in notifList" :key="item._id"  autoClose
					:right-options="[{text: '删除',style: {backgroundColor: '#dd524d'}}]" 
					@click="(e)=>{clickSwipeItem(e,item)}" @change="changeSwipeItem()"	
				>
					<uni-list-item :title="item.title" :note="item.content">
						<template v-slot:footer>
							<view class="timeBox">
								<uni-dateformat class="time" format="yyyy/MM/dd" :date="item.create_time"></uni-dateformat>
								<uni-dateformat class="time" format="hh:mm:ss" :date="item.create_time"></uni-dateformat>
							</view>
						</template>
					</uni-list-item>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</uni-list>
		<kevy-empty v-else :show="true" type="notice" fullScreen></kevy-empty>

	</view>
</template>

<script setup>
	import {
		useNotificationStore
	} from '@/stores/index.js'
	import { storeToRefs } from 'pinia'
	import { ref } from 'vue'
	import { onPageScroll } from '@dcloudio/uni-app'
	import {
		store,
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js'
	const notificationStore = useNotificationStore()
	const { notifList, notifCount } = storeToRefs(notificationStore)
	
	const clickSwipeItem = (e,item) => {
		notificationStore.delNotification(item._id)
		// console.log(e,item);
	}
	const changeSwipeItem = (_id) => {
		
	}
	
	// 清除数据
	const deleteData = () => {
		uni.showModal({
			title: '提示',
			content: `确定要清除所有通知吗？`,
			success: (res) => {
				if (res.confirm) {
					notificationStore.delAllNotification(store.userInfo._id)
					uni.showToast({
						title: '清除成功',
						icon: 'success'
					})
				}
			}
		})
		
	
	}
	
	const tabIsShow = ref(false)
	// 滚动到指定位置触发 控制回到顶部按钮显隐
	onPageScroll((e) => {
		tabIsShow.value = e.scrollTop > 500
		// console.log(tabIsShow.value);
	})
	// 回到顶部
	const goTop = () => {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		})
	}
</script>

<style scoped lang="scss">
	:deep(){
		image{
			background-color: transparent!important;
		}
	}
	.time {
		font-size: 24rpx;
	}
	.timeBox{
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
	}
	
</style>